<script setup>
import {computed, nextTick, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {addUnit} from "@/apis/zyj/units.js";

const props = defineProps({
  allUnits: Array,
  addDialog: Boolean
})
const ruleFormRef = ref();
const dialogVisible = ref(false)
const form = reactive({
  unit: '',
  unitName: '',
  isPrimaryUnit: '',
  primaryUnitId: '',
  conversionRatio: 0,
  isEnabled: '0',
  remarks: ''
})

const mainUnits = computed(() => props.allUnits);

const ruleForm = reactive({...form})
const emit = defineEmits(['close-dialog'])
//关闭弹窗
const handleClose = () => {
  Object.assign(form, ruleForm)
  emit('close-dialog')
}
//确定按钮
const handleSubmit = (value) => {
  value.validate(valid => {
    if (valid) {
      console.log(form)
      addUnit(form).then(req => {
        console.log(req)
        if (req === '成功') {
          ElMessage.success('添加成功')
        } else {
          ElMessage.error('添加失败')
        }
        handleClose()
      })
    } else ElMessage.error('请填写完整信息');
  });
}
// 打开弹窗时清空校验
const handleOpenCardDialog = () => {
  nextTick(() => {
    // 清空校验
    ruleFormRef.value.clearValidate()
  })
}
//校验
const rules = {
  unit: [
    {required: true, message: "单位不能为空", trigger: "blur"},
  ],
  unitName: [
    {required: true, message: "单位名称不能为空", trigger: "blur"},
  ],
  isPrimaryUnit: [
    {required: true, message: "是否是主单位不能为空", trigger: "blur"},
  ],
};
</script>

<template>
  <el-dialog title="添加单位" v-model="props.addDialog" @close="handleClose" @open="handleOpenCardDialog" width="50%">
    <el-form :model="form" label-width="160px" :rules="rules" ref="ruleFormRef">
      <el-form-item label="单位编码" prop="unit">
        <el-input v-model="form.unit" placeholder="请输入单位编码"/>
      </el-form-item>
      <el-form-item label="单位名称" prop="unitName">
        <el-input v-model="form.unitName" placeholder="请输入单位名称"/>
      </el-form-item>
      <el-form-item label="是否是主单位" prop="isPrimaryUnit">
        <el-radio-group v-model="form.isPrimaryUnit">
          <el-radio label="是" value="0">是</el-radio>
          <el-radio label="否" value="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="form.isPrimaryUnit === '1'">
        <el-form-item label="主单位">
          <el-select v-model="form.primaryUnitId" placeholder="请选择主单位">
            <el-option
                v-for="item in mainUnits"
                :key="item.id"
                :label="item.unitName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="与主单位换算比例">
          <el-input-number v-model="form.conversionRatio" :min="0" :step="0.1"/>
        </el-form-item>
      </div>
      <el-form-item label="是否启用" required>
        <el-radio-group v-model="form.isEnabled">
          <el-radio label="是" value="0">是</el-radio>
          <el-radio label="否" value="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
            v-model="form.remarks"
            type="textarea"
            placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>